<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>边框border</title>
<style>
body{width:1000px;margin:0 auto;background:#FCFCFC;}
div{
width:200px;
height:150px;
float:left;
margin:10px 10px;
text-align:center;
line-height:150px;
font-size:20px;

}

.basic_borders.fig5_1 {
	border:15px dotted #C7C8C9;
	background:url(7.jpg) no-repeat center;
	background-size:200px 150px;
	}
.basic_borders.fig5_2 {
	border:15px double #C7C8C9;
	background:url(9.jpg) no-repeat center;
	background-size:200px 150px;
	}
.basic_borders.fig5_3 {
	border:15px dashed #C7C8C9;
	background:url(7.jpg) no-repeat center;
	background-size:200px 150px;
	}
.basic_borders.fig5_4 {
	border:15px solid #C7C8C9;
	background:url(9.jpg) no-repeat center;
	background-size:200px 150px;
	}
.basic_borders.fig5_5 {
	border:15px groove #C7C8C9;
	background:url(9.jpg) no-repeat center;
	background-size:200px 150px;
	}
.basic_borders.fig5_6 {
	border:15px ridge #C7C8C9;
	background:url(7.jpg) no-repeat center;
	background-size:200px 150px;
	}
.basic_borders.fig5_7 {
	border:15px inset #C7C8C9;
	background:url(9.jpg) no-repeat center;
	background-size:200px 150px;
	}
.basic_borders.fig5_8 {
	border:15px outset #A7A9AC;
	background:url(7.jpg) no-repeat center;
	background-size:200px 150px;
	}	
.basic_borders_large.fig9 {
	border-top:8px solid #A7A9AC;
	border-bottom:8px solid #A7A9AC;
	border-radius:30px;
	background:url(7.jpg) no-repeat center;
	background-size:200px 150px;
	}
.basic_borders_large.fig10 {
	border:8px solid #A7A9AC;
	border-radius:8px;
	background:url(6.jpg) no-repeat center;
	background-size:200px 150px;
	}
.basic_borders_large.fig11 {
	border:8px solid #A7A9AC;
	border-radius:16px;
	background:url(9.jpg) no-repeat center;
	background-size:200px 150px;
	}
.basic_borders_large.fig12 {
	border:8px solid #A7A9AC;
	border-radius:40px;
	background:url(8.jpg) no-repeat center;
	background-size:200px 150px;
	}
.basic_borders_large.fig13 {
	border:8px solid #A7A9AC;
	border-radius:50%;
	background:url(9.jpg) no-repeat center;
	background-size:200px 150px;
	}
.basic_borders_large.fig14 {
	border:8px solid #A7A9AC;
	border-top-left-radius:100px;
	border-bottom-right-radius:100px;
	background:url(7.jpg) no-repeat center;
	background-size:200px 150px;
	}
.basic_borders_large.fig15 {
	width:150px;
	border:8px solid #A7A9AC;
	border-radius:50%;
	background:url(8.jpg) no-repeat center;
	background-size:150px 150px;
	}
.basic_borders_large.fig16 {
	border:8px solid #A7A9AC;
	border-top-left-radius:100px;
	border-top-right-radius:100px;
	background:url(6.jpg) no-repeat center;
	background-size:200px 150px;
	}
</style>
<script>

</script>
</head>
<body>
		<h1>1.边框8种style属性</h1>
    	<div class="basic_borders fig5_1"> dotted
    	</div>
    	<div class="basic_borders fig5_2"> double
    	</div>
    	<div class="basic_borders fig5_3"> dashed
    	</div>
    	<div class="basic_borders fig5_4"> solid
    	</div>
    	<div class="basic_borders fig5_5"> groove
    	</div>
    	<div class="basic_borders fig5_6"> ridge
    	</div>
		<div class="basic_borders fig5_7"> inset
    	</div>
    	<div class="basic_borders fig5_8"> outset
    	</div>
		<h1>2.border-radius属性</h1>
		<div class="basic_borders_large fig9">
    	</div>
		<div class="basic_borders_large fig10">
    	</div>
		<div class="basic_borders_large fig11">
    	</div>
		<div class="basic_borders_large fig12">
    	</div>
		<div class="basic_borders_large fig13">
    	</div>
		<div class="basic_borders_large fig14">
    	</div>
		<div class="basic_borders_large fig15">
    	</div>
		<div class="basic_borders_large fig16">
    	</div>
</body>
</html>